<template>
	<!-- 使用z-paging为根容器 -->
	<z-paging-swiper class="container">
		<!-- 固定在顶部的导航栏 -->
		<template #top>
			<view>
				<view class="header">
					<image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>
				</view>
				<!-- 用户信息部分 -->
				<view class="bottom-sheet">
					<!-- 使用 Flex 布局放置头像和按钮 -->
					<view class="avatar-container">
						<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					</view>
					<!-- 按钮放置在头像右侧 -->
					<view class="action-buttons">

						<button class="follow-btn" :class="{ following: isFollowing }" @click="followUser(userInfo.id)">
							{{ isFollowing ? '已关注' : '关注' }}
						</button>
						<button class="chat-btn" @click="startChat(userInfo.id)">私聊</button>
					</view>
					<view class="user-info">
						<text class="username">{{ userInfo.nickname }}</text>
						<text class="user-id">ID: {{ userInfo.id }}</text>
						<text class="bio">{{ userInfo.bio ? userInfo.bio : "这个人很懒，还没写简介" }}</text>

						<view class="user-age-info">
							<image class="icon-man" src="/static/man.png"></image>
							<text class="age">{{ userInfo.age }}</text>
							<text class="vertical-divide-1">|</text>
							<text class="star-sign">{{ userInfo.constellation }}</text>
							<text class="vertical-divide-2">|</text>
							<text class="position">{{ userInfo.address }}</text>
						</view>

						<view class="stats">
							<view class="stat-item">
								<text class="stat-value">{{ userInfo.postCount }}</text>
								<text class="stat-label">动态</text>
							</view>
							<view class="stat-item" @click="goToFollowList">
								<text class="stat-value">{{ userInfo.followCount }}</text>
								<text class="stat-label">关注</text>
							</view>
							<view class="stat-item" @click="goToFansList">
								<text class="stat-value">{{ userInfo.fansCount }}</text>
								<text class="stat-label">粉丝</text>
							</view>
						</view>

					</view>
				</view>

				<view class="divider-line"></view> <!-- 新增的分隔线元素 -->

			</view>
		</template>
		<!-- 动态列表，放在分割线下面 -->
		<view class="user-posts">
			<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false">
				 <view class="post-item" v-for="(item, index) in dataList" :key="item.id" @click="clickToDetails(item)">
					<uni-swiper-dot :info="item.imageList" :current="swiperCurrent" mode="dot" :dots-styles="dotsStyles"
						field="content">
						<swiper v-if="item.imageList.length >0" style="margin-bottom: 8px;height: 558rpx;width: 100%;"
							@change="change" :current="swiperDotIndex">
							<swiper-item v-for="(imageListItem,index) in item.imageList">
								<view>
									<image style="width: 100%;background-color: white;height: 558rpx;" mode="aspectFill"
										:src="imageListItem"></image>
								</view>
							</swiper-item>
						</swiper>


						<view
							style="position: absolute;display: flex;flex-direction: column;bottom: 20px;left: 16px;width: 400rpx;">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<text class="normal-text"
									style="color:#000000;font-size: 17px;font-weight: 500;">{{item.startRoute}}</text>
								<image style="width: 48px;height: 14px; margin: 0 8px 0 8px;"
									src="/static/icon-goTo.png"></image>
								<text class="normal-text"
									style="color:#000000;font-size: 17px;font-weight: 500;">{{item.endRoute}}</text>
							</view>
							<text class="normal-text"
								style="color: #ACACAC;font-size: 17px;font-weight: 500;">{{setDistanceText(item.distance)}}</text>
						</view>

						<view
							style="position: absolute;display: flex;flex-direction: column;bottom: 20px;right: 16px;align-items: flex-end;">
							<text class="normal-text"
								style="color: #ACACAC;font-size: 17px;font-weight: 500;">{{item.playCount}}人游玩过</text>
							<button class="list-play-btn">游玩路线</button>
							<image style="position: absolute;height: 19px;width: 15px;bottom: 3px;left: 12px;"
								src="/static/app-logo.png"></image>
						</view>

					</uni-swiper-dot>
					<view
						style="display: flex;align-items:center;color: #7B7B7B;margin-top: 8rpx;flex-direction: row-reverse;padding-right: 12px;">
						<text>{{setNumberText(item.commentCount)}}</text>
						<image style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;"
							src="/static/page-home-icon-comment.png"></image>
						<text>{{setNumberText(item.collectCount)}}</text>
						<image style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;"
							src="/static/page-home-icon-search-collect.png"></image>
						<text>{{setNumberText(item.loveCount)}}</text>
						<image style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;"
							src="/static/page-home-icon-like.png"></image>
					</view>

					<text class="list-content-text">
						{{item.title}}
					</text>
				</view>
			</z-paging>
		</view>
	</z-paging-swiper>
</template>

<script>
	import {
		getOtherUserInfo,
		getOtherPost,
		postFollow
	} from '@/api/user.js'; // 引入登录接口
	export default {
		data() {
			return {
				swiperCurrent: 0,
				userInfo: {
					// avatar: '/static/avatar.jpg',
					// nickname: '校友首位用户',
					// id: '123456',
					// bio: '这是一个人的简介。',
					// age: 28,
					// constellation: '射手座',
					// address: '重庆市',
					// postCount: 25,
					// followCount: 150,
					// fansCount: 200,
				},
				dotsStyles: { //轮播图下表点样式
					bottom: 0,
					width: 4,
					height: 4,
					border: 'rgba(209, 209, 209, 1.0)',
					backgroundColor: 'rgba(209, 209, 209, 1.0)',
					selectedBorder: '0px',
					selectedBackgroundColor: 'rgba(0, 114, 237, 1.0) '
				},
				swiperDotIndex: 0,
				index: 0,
				current: 0,
				dataList: [],
				checkList: false,
				isFollowing: false
			};
		},
		onLoad(options) {
			if (options.userId) {
				this.userId = options.userId; // 获取页面传递数据
				console.log("获取页面传递数据", this.userId)

			}
		},
		onShow() {
			// this.$refs.paging.reload();
			this.fetchUserInfo();
		},
		methods: {
			followUser(followId) {
				// 切换关注状态
				this.isFollowing = !this.isFollowing;
				const data = {
					followedId: followId,
					isFollow: this.isFollowing,
				};
				 postFollow(data) 
					.then(response => {
						if (response.code == 200) {
							this.userInfo = response.data; 
						} else {
				
						}
					})
					.catch(error => {
						console.error('点赞失败:', error);
					});
				// 这里可以添加关注/取消关注的后台请求逻辑
				// 例如：发送请求到API并根据结果更新isFollowing状态
			},
			startChat(followId) {
				// 开始私聊逻辑
				console.log('开始私聊');
				const targetId = followId; // 将对象序列化并编码
				uni.navigateTo({
					url: `/packageMixture/pages/chat/chat?targetId=${targetId}`
				})
			},
			// goToFollowList() {
			// 	// 跳转到关注列表页面
			// 	console.log('跳转到关注列表');
			// },
			// goToFansList() {
			// 	// 跳转到粉丝列表页面
			// 	console.log('跳转到粉丝列表');
			// },
			// loadMorePosts() {
			// 	// 加载更多动态内容
			// 	console.log('加载更多动态');
			// },
			tabsChange(index) {
				this.tabIndex = index;
				// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
			},
			setNumberText(count) {
				if (count > 99) {
					return '99+';
				} else {
					return count;
				}
			},
			favClick() {
				this.checkList = !this.checkList
				console.log(this.checkList[index]);
				this.$forceUpdate()
			},
			clickToDetails(item) {
				console.log("查看页面详情", item)
				uni.navigateTo({
					url: "/packageMixture/pages/postDetails/postDetails?postId=" + item.id
				})
			},
			setDistanceText(distance) {
				if (distance > 1000) {
					var distanceString = (distance / 1000).toFixed(1)

					return '约' + distanceString + '公里'
				} else {
					return '约' + distance + '米'
				}
			},
			queryList(pageNo, pageSize) {
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
				getOtherPost(this.userId, pageNo, pageSize).then(res => {
					console.log("请求成功:", res)
					this.$refs.paging.complete(res.data.list)
				}).catch(err => {
					console.log("请求失败:", err)
					this.$refs.paging.complete(false)
				});
			},
			itemClick(item, index) {
				console.log('点击了', item.title);
			},
			async fetchUserInfo() {
				getOtherUserInfo(this.userId) // 发送获取用户信息的请求
					.then(response => {
						// 更新用户信息和登录状态
						if (response.code == 0) {
							this.userInfo = response.data.userAndPostInfo;
							this.isFollowing = response.data.isFollow;
						} else {

						}
					})
					.catch(error => {
						console.error('获取用户信息失败:', error);
					});
			},
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 使容器占满整个视口高度 */
		background-color: #ffffff;
	}

	.header {
		position: relative;
		height: 200px;
	}

	.action-buttons {
		display: flex;
		margin-left: 400rpx;
		margin-top: 0px;
		padding-top: 8rpx;
	}

	.chat-btn {
		width: 120rpx;
		height: 56rpx;
		border: none;
		border-radius: 28rpx;
		background: #2F6EF5;
		color: #ffffff;
		flex-shrink: 0;
		font-size: 28rpx;
		/* 根据需要可以调整 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bg-image {
		width: 100%;
		height: 100%;
	}

	.bottom-sheet {
		position: relative;
		background-color: #ffffff;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding: 0px 30rpx 0px 30rpx;
		margin-top: -20px;
		/* 使其看起来和header有连接 */
	}

	.avatar-container {
		position: absolute;
		top: -50px;
		left: 20px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		padding-top: 44rpx;
	}

	.username {
		font-size: 24px;
		font-weight: bold;
	}

	.user-id {
		font-size: 14px;
		color: #666;
		margin-top: 12rpx;
	}

	.bio {
		font-size: 14px;
		color: #666;
		margin-top: 24rpx;
	}

	.user-age-info {
		display: flex;
		align-items: flex-end;
		margin-top: 16rpx;
	}

	.icon-man {
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
	}

	.vertical-divide-1,
	.vertical-divide-2 {
		color: #D2D2D2;
		margin: 0 32rpx 0 32rpx;
	}

	.stats {
		display: flex;
		justify-content: flex-start;
		/* 第一个元素靠左 */
		margin-top: 20px;
		gap: 120rpx;
		/* 每个统计项之间保持 60px 的距离 */
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-value {
		font-size: 18px;
		font-weight: bold;
	}

	.stat-label {
		font-size: 12px;
		color: #666;
	}

	.divider-line {
		border-top: 1px solid #ddd;
		margin: 24rpx 0;
	}

	/* 用户动态列表的样式 */
	.user-posts {
		flex: 1;
		width: 100%;
		height: 100%;
	}



	.list-head-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding-left: 12px;
		padding-left: 12px;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.list-title-text {
		color: #181818;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 17px;
		max-width: 60%;
		padding-left: 3%;
		padding-right: 3%;
		font-weight: 400;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.list-focus-btn {
		min-width: 60px;
		height: 28px;
		font-size: 14px;
		font-weight: 100;
		align-items: center;
		background-color: #1670f1;
		color: #fff;
		border-radius: 20px;
		position: absolute;
		right: 12px;
		display: flex
	}

	.list-play-btn {
		border-radius: 50%;
		color: #FFF;
		background-color: #2F6EF5;
		font-size: 17px;
		width: 115px;
		height: 28px;
		flex-shrink: 0;

		align-items: center;
		border-radius: 20px;
		display: flex;
		justify-content: flex-end;

	}

	.list-content-text {
		color: #181818;
		margin: 12px;
		font-size: 17px;
		font-style: normal;
		font-weight: 400;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.follow-btn {
		width: 120rpx;
		height: 56rpx;
		border: none;
		border-radius: 28rpx;
		background: #2F6EF5;
		color: #ffffff;
		flex-shrink: 0;
		font-size: 28rpx;
		/* 根据需要可以调整 */
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.follow-btn.following {
		background-color: transparent;
		/* 关注后的背景透明，模拟镂空效果 */
		color: #ACACAC;
		/* 文字颜色变为灰色 */
		border: 1px solid #ACACAC;
		/* 灰色边框 */
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		/* 调整 padding 保持一致 */
	},
	.post-item {
		background-color: #ffffff;
		margin-bottom: 16px;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
</style>